<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>浮动和简单的清浮动</title>
		<!--清除浮动的示例-->
		<style type="text/css">
			div{
				word-wrap: break-word;
			}
			.bg-1 {
				background-color: lightsalmon;
				width: 100px;
				height: 100px;
			}
			
			.bg-2 {
				background-color: lightgoldenrodyellow;
				width: 200px;
				height: 200px;
			}
			
			.bg-3 {
				background-color: lightgreen;
				width: 300px;
				height: 300px;
			}
			
			.bg-4 {
				background-color: skyblue;
				width: 400px;
				height: 400px;
			}
			
			.left {
				float: left;
			}
			
			.right {
				float: right;
			}
		</style>
	</head>

	<body class="container" id="container">
		<div>
			<div class="bg-1 ">1</div>
			<div class="bg-2 left">2</div>
			<div class="bg-3">3</div>
			<div class="bg-4 left">4</div>
			<div class="bg-1">5</div>
			<script type="text/javascript">
			</script>
	</body>

</html>